<template>
	<view>
		<uni-nav-bar :background="isbg" :shadow="true" :border="false">
			<block slot="left">
				<view class="nav-reft">LOGO</view>
			</block>
			<block slot="right">
				<view class="nav-right">
					<view class="nav-img"></view>
					<view class="nav-day">
						<text class="day-top">{{nowWeek}}</text>
						<text class="day-bottom">{{nowDate}}</text>
					</view>
					<view class="nav-img"></view>
					<view class="nav-date">{{nowTime}}</view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components:{
			uniNavBar
		},
		data() {
			return {
				isbg:'linear-gradient(180deg, rgba(114, 180, 255, 0.8), rgba(73, 153, 235, 0.8), rgba(43, 125, 209, 0.8))', //导航栏背景
				timeId1:null,
			}
		},
		created() {
			this.forMat()
		},
		computed:{
			...mapState(['nowDate','nowTime','nowWeek','nowTimeIdLogin'])
		},
		methods: {
			forMat() {
				this.$store.commit('getCurrentDate',new Date())
				if(this.timeId1==this.nowTimeIdLogin){
					this.timeId1 = setInterval(()=>{
						this.$store.commit('getCurrentDate',new Date())
						this.$store.commit('setLoginNowTimeId',this.timeId1)
						uni.$emit('clearTimeId1',this.timeId1)
					},1000*10)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.nav-reft{
		font-size: 55rpx;
		color: #FFFFFF;
		// padding: 60rpx;
		padding: 5vh;
		box-sizing: border-box;
	}
	.nav-right{
		display: flex;
		align-items: center;
		margin-left: 15rpx;
	}
	.nav-img{
		width: 3rpx;
		height: 50rpx;
		background: #5185DC;
		box-shadow: 1rpx 0px 1rpx 0px #A2C2F3;
		// margin-right: 44rpx;
		&:first-child{
			margin-left: 80rpx;
		}
	}
	.nav-day{
		display: flex;
		flex-direction: column;
		margin: 0 46rpx 0 30rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		text-align: right;
		color: #FFFFFF;
	}
	.day-top{}
	.day-bottom{}
	.nav-date{
		font-size: 40rpx;
		color: #FFFFFF;
		margin: 0 0 0 40rpx;
	}
</style>
